<template>
  <div class="category-wrap">
    <!-- 搜索头部 -->
    <div class="header">
      <div class="box" @click="goInnerSearch">
        <i class="iconfont icon-sousuo"></i>
        <span>搜索商品, 共121079款好物</span>
      </div>
    </div>
    <!-- 底部 -->
    <div class="bottom">
      <!-- 左侧导航 -->
      <van-sidebar v-model="activeKey" class="left">
        <van-sidebar-item :to="`/category/${item.id}/${index}`" :title="item.name" v-for="(item, index) in categoryL1List" :key="item.id" />
      </van-sidebar>
      <!-- 右侧商品 -->
      <div class="right">
        <div class="img">
          <img :src="((currentCategory.bannerList || [])[0] || {}).picUrl" alt="" />
        </div>
        <div class="cateList" v-for="(item, index) in categoryGroupList" :key="item.id">
          <div class="title">{{ item.name }}</div>
          <ul class="cate">
            <li class="item" v-for="(item, index) in item.categoryList" :key="item.id" @click="goCateList(item.id)">
              <img :src="item.wapBannerUrl" alt="" />
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import search from './search/index.vue'
export default {
  components: {
    search
  },
  data() {
    return {
      activeKey: this.$route.params.index,
    };
  },
  // 组件挂载完毕
  mounted() {
    // 发请求获取为你推荐数据
    this.getCategory();
  },
  computed: {
    ...mapGetters("category", ["currentCategory", "categoryL1List", "categoryGroupList", "categoryL2List"]),
  },
  methods: {
    // 获取分类的数据
    getCategory() {
      this.$store.dispatch("category/categoryList", this.$route.params.id);
    },
    // 点击去分类下的详情商品分类页面
    goCateList(id) {
      this.$router.push({ path: "/catelist", query: { categoryId: this.$route.params.id ? this.$route.params.id : 11, subCategoryId: id, categoryType: 0 } });
      this.$store.dispatch("category/saveIndex", id);
    },
    async goInnerSearch() {
      this.$store.dispatch("searchList");
      this.$router.push("/innerSearch");
      // 获取请求关键字函数
    },
  },
  watch: {
    $route: {
      deep: true,
      handler() {
        location.reload();
        this.getCategory();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.category-wrap {
  width: 100%;
  height: 100%;
  .header {
    width: 345px;
    height: 44px;
    padding: 0 15px;
    border-bottom: 1px solid rgba(70, 68, 68, 0.221);
    display: flex;
    align-items: center;
    justify-content: center;
    .box {
      width: 100%;
      height: 28px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #eee;
      font-size: 14px;
      color: #666;
      i {
        padding-right: 5px;
      }
    }
  }
  .bottom {
    width: 100%;
    /*height: calc(100vh - 55px);*/
    height: 574px;
    overflow: hidden;
    display: flex;
    .left {
      width: 80px;
      height: 100%;
      padding-top: 5px;
      border-right: 1px solid rgba(70, 68, 68, 0.221);
      :deep(.van-sidebar-item) {
        padding: 15px 10px;
        background-color: #fff;
      }
      :deep(.van-sidebar-item--select) {
        color: #ee0a24;
      }
      :deep(.van-sidebar-item--select::before) {
        height: 25px;
        width: 3px;
      }
    }
    ::-webkit-scrollbar {
      display: none;
    }
    .right {
      height: 100%;
      padding: 15px;
      flex: 1;
      overflow-y: scroll;
      .img {
        height: 96px;
        margin-bottom: 16px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .cateList {
        width: 100%;
        .title {
          height: 21px;
          padding-bottom: 4px;
          border-bottom: 1px solid #d9d9d9;
          font-size: 14px;
          font-weight: 700;
          text-align: left;
          line-height: 21px;
          margin-bottom: 12px;
        }
        .cate {
          width: 102%;
          height: 100%;
          font-size: 12px;
          display: flex;
          flex-wrap: wrap;
          overflow: hidden;
          .item {
            width: 72px;
            height: 108px;
            display: flex;
            flex-direction: column;
            margin-right: 17px;
            align-items: center;
            flex: 0;
            img {
              width: 72px;
              height: 72px;
            }
          }
        }
      }
    }
  }
}
</style>
